<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>国内典型芯片厂商营收表现</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
  title: {
    text: '寒武纪营收表现',
    left: 'center',
    top: 10,
    textStyle: {
      fontSize: 16,
      fontWeight: 'normal'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params) {
      const value = params[0].axisValue;
      let res = `<strong>${value}</strong><br>`;
      params.forEach(param => {
        if (param.seriesName === '营业总收入') {
          res += `${param.marker} ${param.seriesName}: ${param.value} 亿元<br>`;
        } else if (param.seriesName === '同比增长率') {
          res += `${param.marker} ${param.seriesName}: ${param.value}%<br>`;
        }
      });
      return res;
    }
  },
  legend: {
    data: ['营业总收入', '同比增长率'],
    top: 40,
    right: '10%',
    textStyle: { fontSize: 12 }
  },
  grid: {
    left: '10%',
    right: '15%',
    bottom: '15%',
    top: '20%'
  },
  xAxis: {
    type: 'category',
    data: ['2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3'],
    axisLabel: {
      rotate: 45,
      interval: 0
    }
  },
  yAxis: [
    {
      // 左侧 Y 轴 - 营业收入（亿元）
      type: 'value',
      name: '单位：亿元',
      nameLocation: 'middle',
      nameGap: 40,
      position: 'left',
      splitLine: {
        show: true,
        lineStyle: { color: '#eee' }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      // 右侧 Y 轴 - 同比增长率（%）
      type: 'value',
      name: '同比增长率 (%)',
      nameLocation: 'middle',
      nameGap: 40,
      position: 'right',
      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      name: '营业总收入',
      type: 'bar',
      barWidth: '30%',
      itemStyle: {
        color: '#FFD700'
      },
      label: {
        show: true,
        position: 'insideTop',
        formatter: '{c}'
      },
      data: [0.3, 0.4, 1.2, 9.9, 11.1, 17.7, 17.3],
      yAxisIndex: 0
    },
    {
      name: '同比增长率',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        width: 2
      },
      areaStyle: {
        opacity: 0.1
      },
      label: {
        show: true,
        position: 'top',
        formatter: '{c}%'
      },
      data: [-65.9, -0.2, 284.6, 75.5, 4230.2, 4425.0, 1332.5],
      yAxisIndex: 1
    }
  ],
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        bottom: 10,
        style: {
          text: 'Source: QuestMobile AI产业研究院 2025年11月；根据公开资料整理',
          textAlign: 'center',
          fontSize: 12,
          fill: '#666'
        }
      }
    ]
  }
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>